<template>
    <div class="json-editor">
        <textarea ref="textarea" />
    </div>
</template>

<script>
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
// 替换主题这里需修改名称
import 'codemirror/theme/idea.css';
import 'codemirror/mode/clike/clike';

export default {
    props: {
        value: {
            type: String,
            required: true
        },
        height: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            editor: false
        };
    },
    watch: {
        value(value) {
            const editorValue = this.editor.getValue();
            if (value !== editorValue) {
                this.editor.setValue(this.value);
            }
        },
        height(value) {
            this.editor.setSize('auto', this.height);
        }
    },
    mounted() {
        this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
            mode: 'text/x-java',
            lineNumbers: true,
            lint: true,
            lineWrapping: true,
            tabSize: 2,
            cursorHeight: 0.9,
            // 替换主题这里需修改名称
            theme: 'idea',
            readOnly: true
        });
        this.editor.setSize('auto', this.height);
        this.editor.setValue(this.value);
    },
    methods: {
        getValue() {
            return this.editor.getValue();
        }
    }
};
</script>

<style scoped>
.json-editor {
    height: 100%;
    margin-bottom: 10px;
}

.json-editor >>> .CodeMirror {
    font-size: 14px;
    overflow-y: auto;
    font-weight: normal
}

.json-editor >>> .CodeMirror-scroll {
}

.json-editor >>> .cm-s-rubyblue span.cm-string {
    color: #F08047;
}
</style>
